<template>
    <div>
        <div v-if="!hiddenForm" class="adviceBtn">
            <el-button
                type="primary"
                round
                @click="dialogVisible = true"
                style="margin-right: 10px"
            >
                策略设置
            </el-button>
            <el-switch
                v-model="switchValue"
                class="mb-2"
                style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                "
                active-text="启用个性化推荐"
                inactive-text="关闭推荐"
                @change="adviceFn"
            />
        </div>
        <el-form
            v-if="hiddenForm"
            :model="formData"
            :rules="rules"
            style="padding-top: 20px"
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item>
                        <el-select
                            v-model="formData.scoolYear"
                            placeholder="不限年份"
                        >
                            <el-option label="2023" value="2022" />
                            <el-option label="2022" value="2021" />
                        </el-select> </el-form-item
                ></el-col>

                <el-col :span="8">
                    <el-form-item>
                        <el-select
                            v-model="formData.branch"
                            placeholder="选择科目"
                            prop="branch"
                        >
                            <el-option label="文科" value="文科" />
                            <el-option label="理科" value="理科" />
                        </el-select> </el-form-item
                ></el-col>
                <el-col :span="8">
                    <el-form-item prop="schoolLevel">
                        <el-select
                            v-model="formData.schoolLevel"
                            placeholder="不限批次"
                        >
                            <el-option label="本科一批" value="firstLevel" />
                            <el-option label="本科二批" value="secondLevel" />
                        </el-select> </el-form-item
                ></el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item>
                        <el-select
                            v-model="formData.schoolArea"
                            placeholder="不限地区"
                            clearable
                        >
                            <template
                                v-for="(item, index) in provinceList"
                                :key="item.index"
                            >
                                <el-option
                                    :label="item.name"
                                    :value="item.value"
                                />
                                <!-- <el-option label="2022" value="2021" /> -->
                            </template>
                        </el-select>
                    </el-form-item></el-col
                >
                <el-col :span="10">
                    <el-form-item
                        label=""
                        style="padding-left: 10px"
                        prop="schoolName"
                    >
                        <el-input
                            v-model="formData.schoolName"
                            placeholder="请输入学校名称"
                            clearable
                        /> </el-form-item
                ></el-col>
                <el-col :span="2">
                    <el-button
                        type="primary"
                        @click="schoolSelectFn"
                        style="margin-left: 10px"
                        >搜索</el-button
                    >
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="院校代码" label="院校代码" width="180" />
            <el-table-column prop="院校名称" label="院校名称" width="180" />
            <el-table-column prop="批次" label="批次" />
            <el-table-column prop="分科" label="分科" />
            <el-table-column prop="专业代码" label="专业代码" />
            <el-table-column prop="专业名称" label="专业名称" />
            <el-table-column prop="录取最低分" label="录取最低分" />
            <el-table-column
                prop="ranking"
                :label="switchValue == true ? '推荐' : '等效排名'"
                align="center"
            >
                <template #default="scope">
                    <div
                        v-if="
                            switchValue == true &&
                            scope.row.ranking >= stableData &&
                            scope.row.ranking <= sureData
                        "
                        style="display: flex; align-items: flex-end"
                    >
                        <el-tag type="danger">稳</el-tag>
                    </div>

                    <div
                        v-else-if="
                            switchValue == true && scope.row.ranking >= sureData
                        "
                        style="display: flex; align-items: flex-end"
                    >
                        <el-tag>保</el-tag>
                    </div>
                    <!-- 冲 -->
                    <div
                        v-else-if="
                            switchValue == true &&
                            scope.row.ranking <=
                                Number(props.adviceForm.equalRanking) &&
                            scope.row.ranking >= changeData
                        "
                        style="display: flex; align-items: flex-end"
                    >
                        <el-tag type="success">冲</el-tag>
                    </div>
                    <div v-else>
                        {{ scope.row.ranking ? scope.row.ranking : "-" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="province" label="所在地" />
        </el-table>
        <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="preTableData.length"
            >
            </el-pagination>
        </div>

        <el-dialog v-model="dialogVisible" title="策略设置" width="500">
            <!-- dialog策略设置框 -->
            <el-form v-model="dialogForm" ref="dialogRef">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="稳一稳：" prop="stable">
                            <el-select
                                v-model="dialogForm.stable"
                                placeholder="请选择策略"
                            >
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+500`"
                                    value="+500"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+1000`"
                                    value="+1000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+1500`"
                                    value="+1500"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+2500`"
                                    value="+2500"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+3500`"
                                    value="+3500"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+5500`"
                                    value="+5500"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="保一保：" prop="sure">
                            <el-select
                                v-model="dialogForm.sure"
                                placeholder="保一保"
                            >
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+6000`"
                                    value="+6000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+7000`"
                                    value="+7000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+8000`"
                                    value="+8000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+9000`"
                                    value="+9000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+10000`"
                                    value="+10000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)+15000`"
                                    value="+15000"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="冲一冲：" prop="challenge">
                            <el-select
                                v-model="dialogForm.challenge"
                                placeholder="冲一冲"
                            >
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)-500`"
                                    value="-500"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)-1000`"
                                    value="-1000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)-1500`"
                                    value="-1500"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)-3000`"
                                    value="-3000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)-5000`"
                                    value="-5000"
                                />
                                <el-option
                                    :label="` ${props.adviceForm.equalRanking}(当前位次)-7500`"
                                    value="-7500"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmFn">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { provinceList } from "@/mock/mapProvince";
import { getItems } from "@/api/school";
// 导入我们自定义关于counter的store
import useCounter from "../../store/2022dataStore";
import useCounter2021 from "../../store/2021dataStore";
// 调用函数才会创建store, 不调用不会创建
const counterStore = useCounter();
const counterStore2021 = useCounter2021();
const props = defineProps({
    stuData: { type: Object },
    hiddenForm: { type: Boolean, default: true },
    adviceForm: { type: Object },
});
console.log(props.stuData, "胡坤");

// 分页器
let currentPage = ref(1);
let pageSize = ref(15);

const handleSizeChange = (val: any) => {
    pageSize.value = val;
};

const handleCurrentChange = (val: any) => {
    currentPage.value = val;
};
// var flag = ref(false);
const tableData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = startIndex + pageSize.value;

    return preTableData.value.slice(startIndex, endIndex);

    // return preTableData.value;
});
let data = reactive({
    tableData: [] as any,
    ruleForm: {
        page: 1,
        pageSize: 10,
        name: "",
        level: "1",
        subject: "0",
        CollegeProvince: "",
        CollegeLevel: "",
    },
    total: 0,
    CollegeProvince: [
        {
            checked: true,
            name: "全部",
        },
        {
            checked: false,
            name: "北京市",
        },
        {
            checked: false,
            name: "天津市",
        },
        {
            checked: false,
            name: "河北省",
        },
        {
            checked: false,
            name: "山西省",
        },
        {
            checked: false,
            name: "内蒙古自治区",
        },
        {
            checked: false,
            name: "辽宁省",
        },
        {
            checked: false,
            name: "吉林省",
        },
        {
            checked: false,
            name: "黑龙江省",
        },
        {
            checked: false,
            name: "上海市",
        },
        {
            checked: false,
            name: "江苏省",
        },
        {
            checked: false,
            name: "浙江省",
        },
        {
            checked: false,
            name: "安徽省",
        },
        {
            checked: false,
            name: "福建省",
        },
        {
            checked: false,
            name: "江西省",
        },
        {
            checked: false,
            name: "山东省",
        },
        {
            checked: false,
            name: "河南省",
        },
        {
            checked: false,
            name: "湖北省",
        },
        {
            checked: false,
            name: "湖南省",
        },
        {
            checked: false,
            name: "广东省",
        },
        {
            checked: false,
            name: "广西壮族自治区",
        },
        {
            checked: false,
            name: "海南省",
        },
        {
            checked: false,
            name: "重庆市",
        },
        {
            checked: false,
            name: "四川省",
        },
        {
            checked: false,
            name: "贵州省",
        },
        {
            checked: false,
            name: "云南省",
        },
        {
            checked: false,
            name: "西藏自治区",
        },
        {
            checked: false,
            name: "陕西省",
        },
        {
            checked: false,
            name: "甘肃省",
        },
        {
            checked: false,
            name: "青海省",
        },
        {
            checked: false,
            name: "宁夏回族自治区",
        },
        {
            checked: false,
            name: "新疆维吾尔自治区",
        },
        {
            checked: false,
            name: "台湾省",
        },
        {
            checked: false,
            name: "香港特别行政区",
        },
        {
            checked: false,
            name: "澳门特别行政区",
        },
    ],
    CollegeLevel: [
        {
            checked: true,
            name: "全部",
        },
        {
            checked: false,
            name: "211",
        },
        {
            checked: false,
            name: "985",
        },
    ],
});
//获取学校
const getSchool = () => {
    if (
        data.ruleForm.CollegeProvince == "全部" ||
        data.ruleForm.CollegeLevel == "全部"
    ) {
        data.ruleForm.CollegeProvince = "";
        data.ruleForm.CollegeLevel = "";
    }
    getItems(data.ruleForm).then((res) => {
        data.tableData = res.data.schools;
        data.total = res.data.total;
        //处理学校层次字符串转为数组
        data.tableData.forEach((item) => {
            if (item.CollegeLevel) {
                item.CollegeLevel = item.CollegeLevel.slice(2, -2).split(
                    "', '"
                );
            }
        });
    });
};

//点击省份标签
interface ChangeCollegePrvType {
    checked: boolean;
    name: string;
}
const ChangeCollegePrv = (item: ChangeCollegePrvType) => {
    data.CollegeProvince.forEach((item) => {
        item.checked = false;
    });
    item.checked = true;
    data.ruleForm.CollegeProvince = item.name;
    if (item.name == "全部") {
        data.ruleForm.CollegeProvince = "";
    }
    getSchool();
};
onMounted(() => {
    // 获取四川省数据
    schoolSelectFn();
    console.log(counterStore.counter.list[0], "测试数据");

    console.log(counterStore.mathOneJson.list[15], "实际数据");

    console.log(provinceList, "省份");
});
// 预处理table数据
const preTableData = ref([]);
// 表单数据
const formData = reactive({
    schoolName: "",
    scoolYear: "2022",
    schoolLevel: "firstLevel",
    schoolArea: "",
    branch: "理科",
});
const rules = reactive({
    branch: [{ required: true, message: "请选择科目", trigger: "change" }],
    schoolLevel: [{ required: true, message: "请选择批次", trigger: "change" }],
    // schoolName: [
    //     { required: true, message: "请输入学校名称2", trigger: "change" },
    // ],
});
// 筛选条件
const schoolSelectFn = () => {
    console.log(formData.schoolLevel, "选择的批次");
    console.log(formData.branch, "选择的学科");
    console.log(formData.scoolYear, "选择的年份");
    console.log(counterStore, "状态管理");
    let listData =
        formData.scoolYear == "2022" ? counterStore : counterStore2021;

    // 判断文/理科{
    if (formData.branch == "理科") {
        // 判断批次
        if (formData.schoolLevel === "firstLevel") {
            console.log("本科一批数据");

            preTableData.value = listData.mathOneJson.list;
        } else {
            console.log("本科二批数据");
            preTableData.value = listData.mathTwoJson.list;
        }
    } else {
        // 文科数据
        // 判断批次
        if (formData.schoolLevel === "firstLevel") {
            console.log("文科本一批数据", listData.liberalOneJson);

            preTableData.value = listData.liberalOneJson.list;
        } else {
            console.log("文科本科二批数据");
            preTableData.value = listData.liberalTwoJson.list;
        }
    }
    selectProvince(
        preTableData.value,
        formData.schoolArea,
        formData.schoolName
    );
};
const selectProvince = (data, area, name) => {
    // 筛选省份
    if (area) {
        preTableData.value = data.filter((item: any) => {
            return item.province == area;
        });
    }
    if (name) {
        preTableData.value = data.filter((item: any) => {
            return item.院校名称 == name;
        });
    }
};
// 策略框
const dialogVisible = ref(false);
const dialogForm = reactive({
    stable: "+1000",
    sure: "+7000",
    challenge: "-500",
});
// 筛选策略数据
var stableData;
var sureData;
var changeData;
const adviceTableData = ref();
const selectStragyFn = () => {
    stableData =
        Number(props.adviceForm.equalRanking) + Number(dialogForm.stable);
    sureData = Number(props.adviceForm.equalRanking) + Number(dialogForm.sure);
    changeData =
        Number(props.adviceForm.equalRanking) + Number(dialogForm.challenge);
    console.log(
        stableData,
        sureData,
        changeData,

        "稳-保-冲"
    );
    let stableDataList = preTableData.value
        .filter((item) => {
            return item.ranking >= stableData && item.ranking <= sureData;
        })
        .slice(1, 4);
    let sureDataList = preTableData.value
        .filter((item) => {
            // return item.ranking >= stableData && item.ranking <= sureData;
            return item.ranking >= sureData;
        })
        .slice(1, 4);
    let challengeDataList = preTableData.value
        .filter((item) => {
            return (
                item.ranking <= Number(props.adviceForm.equalRanking) &&
                item.ranking >= changeData
            );
        })
        .slice(4, 7);
    // 设置具体位次不可靠，筛选位次范围然后加入列表
    adviceTableData.value = [
        ...stableDataList,
        ...sureDataList,
        ...challengeDataList,
    ];
    preTableData.value = adviceTableData.value;
    console.log(
        preTableData.value.filter((item) => {
            return (
                item.ranking <= Number(props.adviceForm.equalRanking) &&
                item.ranking >= changeData
            );
        }),
        "稳上的学校数据"
    );

    console.log(adviceTableData.value, "筛选的一部分数据");
};
// 策略确认后
const confirmFn = () => {
    dialogVisible.value = false;
    // console.log(
    //     dialogForm.stable,
    //     dialogForm.sure,
    //     dialogForm.challenge,
    //     "稳-保-冲"
    // );
    console.log(props.adviceForm, "推荐数据的传递");
    const { schoolLevel, schoolArea, equalRanking, schoolYear } =
        props.adviceForm;
    formData.scoolYear = schoolYear;
    formData.schoolLevel =
        schoolLevel == "本科一批" ? "firstLevel" : "secondLevel";
    formData.schoolArea = schoolArea;
    formData.branch = props.stuData.subject == 0 ? "文科" : "理科";
    // 等效排名
    //  equalRanking;
    console.log(formData, "更改后的formdata");
};
const switchValue = ref(false);
const dialogRef = ref(null);
const adviceFn = () => {
    if (switchValue.value == true) {
        confirmFn();
        schoolSelectFn();
    } else {
        // 写个默认排序
        dialogRef.value.resetFields();

        schoolSelectFn();
    }
    selectStragyFn();
    console.log("点击了推荐按钮");
};
</script>

<style scoped lang="scss">
.pagination {
    margin-top: 15px;
    bottom: 0;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.box-card {
    width: 100%;
    .incard {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}
.adviceBtn {
    position: absolute;
    top: 90px;
    right: 15px;
}
</style>